<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <style>@import url("../assets/css/view.css");</style>
    <style>@import url("../assets/css/layui.css");</style> -->
    <!-- <link href="../assets/css/layui.css" rel="stylesheet" type="text/css"> -->
    <link href="erzu/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <script src="../vue.min.js"></script>
    <script src="../axios.min.js"></script>
    <title></title>
</head>
<body class="layui-view-body">
<div id="link">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">分析数据</div>

                <!-- <div class="layui-form-item">
                  <label class="layui-form-label">输入框</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div> -->
                <!-- <div class="layui-form-item">
                  <label class="layui-form-label">密码框</label>
                  <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div> -->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择链接</label>
                    <div class="layui-input-block">
                        <select v-model="links" lay-verify="required" @change="getDatabase($event)">
                            <option value="0">请选择</option>
                            <option v-for="u in linkList" :value="u.id">{{u.linkName}}</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">选择数据库</label>
                    <div class="layui-input-block">
                        <select v-model="databaseId" lay-verify="required" @change="getTable($event)">
                            <option value="0">请选择</option>
                            <option v-for="u in databaseList" :value="u.id">{{u.databaseName}}</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">选择表名</label>
                    <div class="layui-input-block">
                        <select v-model="tableName" lay-verify="required" @change="getData($event)">
                            <option value="0">请选择</option>
                            <option v-for="u in tableList" :value="u">{{u}}</option>
                        </select>
                    </div>
                </div>


                <table class="imgtable">
                    <tr v-for="(list,index) in dataList"
                        v-if="index==0">
                        <td v-for="(key,value) in list" :key=value>
                            <template v-if="value">
                                {{value}}
                            </template>
                        </td>
                    </tr>
                    <tr v-for="list in dataList">
                        <td v-for="(key,value) in list" :key=key>
                            {{key}}
                        </td>
                    </tr>
                </table>

                <!-- <div class="layui-form-item">
                  <label class="layui-form-label">选择字段名</label>
                  <div class="layui-input-block" v-model="task.fieldNamesArray" v-for="u in sourcefiledList">
                    <input type="checkbox" :value="u" @click="addField(u)">{{u}}
                  </div>
                </div>


                <div class="layui-form-item">
                  <label class="layui-form-label">选择目标链接</label>
                  <div class="layui-input-block" >
                    <select v-model="targetlinks" lay-verify="required" @change="gettargetdatabase($event)">
                      <option value="0">请选择</option>
                      <option v-for="u in targetlinkList" :value="u.id">{{u.linkName}}</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">选择目标数据库</label>
                  <div class="layui-input-block">
                    <select v-model="task.targetDatabaseId" lay-verify="required">
                      <option value="0">请选择</option>
                      <option v-for="u in targetdatabaseList" :value="u.id">{{u.databaseName}}</option>
                    </select>
                  </div>
                </div>



                <div class="layui-form-item">
                  <label class="layui-form-label">目标表名: </label>
                  <div class="layui-input-block">
                    <input type="text" v-model="task.targetTableName"> <br>
                  </div>
                </div>


                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn layui-btn-blue"  @click="commitTask()">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>  -->


            </div>
        </div>
    </div>
</div>
<!-- <script src="../assets/layui.all.js"></script> -->
<!-- <script>
  var form = layui.form
    ,layer = layui.layer;
</script> -->
<script>
    new Vue({
        el: "#link",
        data: {
            links: "0",
            linkList: [],
            databaseId: "0",
            databaseList: [],
            tableName: "0",
            tableList: [],
            data: "0",
            dataList: []


        },
        created() {
            this.getLinks();
        },
        methods: {
            getLinks: function () {//获取源链接
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/bi/biController/getLinkName", {headers: {'Authorization': Authorization}}).then(response => {
                    this.linkList = response.data.data;
                }).catch(function (error) {
                  if (5102 == error.response.status) {

                      alert("无权限");
                      location.href="wuquan.html";
                      
                  }
              })
            },


            getDatabase: function () {//获取链接下数据库
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/bi/biController/getDatabaseByLinkId/" + this.links, {headers: {'Authorization': Authorization}}).then(response => {
                    this.databaseList = response.data.data;
                })
            },

            getTable: function () {//获取链接下的表
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/bi/biController/getTablesByDatabaseId/" + this.databaseId, {headers: {'Authorization': Authorization}}).then(response => {
                    this.tableList = response.data.data;
                })
            },
            getData: function () {//获取数据
                var Authorization = localStorage.getItem('Authorization');
                axios.get("http://localhost:9005/bi/biController/getListByDatabaseNameAndTableName/" + this.databaseId + "/" + this.tableName + "/1", {headers: {'Authorization': Authorization}}).then(response => {
                    this.dataList = response.data.data;
                })
            },

        }
    })
</script>
</body>
</html>